<template>
	<view class="content" >
		<u-navbar :is-back="true" :border-bottom="false">
			
			<view  class="slot-wrap disfr-lr p15 f32" style="width: 80%;">
				<view class="slot-wrap-left"></view>
				<view class="slot-wrap-center">帐号关注</view>
				<view class="slot-wrap-right pr disf"></view>
			</view>
		</u-navbar>
		<my_navbar_ext height="50" bg-color="#ffffff">
			<u-tabs-swiper ref="tabs1" :current="current" @change="tabsChange" :list="tagsList" :is-scroll="false"></u-tabs-swiper>
		</my_navbar_ext>
			
		<view v-if="show_main" class="main" >
			
			<view :class="current < 2 ? 'show' : 'hide'"><!--我关注的/关注我的-->
				<view v-for="(item,index) in list" :key="item.id" class="bgf m20" style="border-radius: 6px;">
					<view class="disfr-lr p20 " >
						<view @click="chat" :data-user_id="item.user_id" :data-nick="item.nickname" class="disf mr30">
							<view style="width: 90rpx;height: 90rpx;overflow: hidden;border-radius:50%;flex-shrink: 0;">
								<u-image width="94rpx" height="94rpx" :src="item.head_pic">
									<template v-slot:error>
										<image src="/static/image/default-user.png" style="width:94rpx;height: 94rpx;"></image>
									</template>
								</u-image>
							</view>
							<view class="f28 ml10" style="width: 360rpx;">
								<view class="f32 toell">{{item.nickname}}</view>
								<view>
									<u-icon name="a-31guanzhu1-xuanzhong" custom-prefix="qxl-icon"
									style="position: relative;top:4rpx;right:0;" :color="item.is_eachother ? 'red' : '#666666'" size="44"></u-icon>
									<text class="f28 pr" style="top:-3rpx" v-if="item.is_eachother">已互关</text>
									<text class="f28 pr" style="top:-3rpx" v-else>未互注</text>
								</view>
							</view>
						</view>
						<view style="line-height: 90rpx;">
							<view v-if="current == 1" 
							@click="cancelFollow" 
							:data-user_id="item.user_id" 
							class="custom-min-button" 
							style="border-radius: 4px;background: red;">取消关注</view>
							<view v-else-if="current == 0">
								<view v-if="item.is_eachother"
								@click="cancelFollow" 
								:data-user_id="item.user_id" 
								class="custom-min-button" 
								style="border-radius: 4px;background: red;">取消互关</view>
								<view v-else @click="setFollow"
								:data-user_id="item.user_id" 
								class="custom-min-button" 
								style="border-radius: 4px;">关注对方</view>
							</view>
							
						</view>
					</view>
				</view>
				<view v-if="list.length <= 0 && not_load" style="text-align: center;margin-top: 40%;">
					<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
					<view class="f32 col999 mt20">什么都木有哦</view>
				</view>
				<pageload :page_load="page_load" :next_page="next_page" :list="list" /><!--分页加载状态-->
			</view><!--我关注的/关注我的结束-->
			
			<view :class="current == 2 ? 'show' : 'hide'"><!--我的黑名单列表-->
				<view v-for="(item,index) in blackList" :key="item.id" class="bgf m20" style="border-radius: 6px;">
					<view class="disfr-lr p20 " style="line-height: 90rpx;">
						<view class="disf mr30">
							<view style="width: 90rpx;height: 90rpx;overflow: hidden;border-radius:50%;flex-shrink: 0;">
								<u-image width="94rpx" height="94rpx" :src="item.head_pic">
									<template v-slot:error>
										<image src="/static/image/default-user.png" style="width:94rpx;height: 94rpx;"></image>
									</template>
								</u-image>
							</view>
							<view class="f28 ml10" style="width: 360rpx;">
								<view class="f32 toell">{{item.nickname}}</view>
							</view>
						</view>
						<view>
							<view @click="liftblack" :data-user_id="item.id" class="custom-min-button" style="border-radius: 4px;">解除黑名单</view>
						</view>
					</view>
				</view>
				<view v-if="blackList.length <= 0 && not_load" style="text-align: center;margin-top: 40%;">
					<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
					<view class="f32 col999 mt20">什么都木有哦</view>
				</view>
				<pageload :page_load="page_load" :next_page="next_page" :list="blackList" /><!--分页加载状态-->
			</view><!--我的黑名单列表结束-->
			
            
			
		</view>
		
		
	   <loading :loading="not_load"/><!--加载状态-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const show_main=ref(true);
const page_load=ref(false);
const not_load=ref(false);
const next_page=ref('');
const list=ref([]);
const tagsList=ref([
	{name:'关注我的'},
	{name:'我的关注'},
	//{name:'相互关注'},
	{name:'拉黑用户'},
	]);
const current=ref(0);

//取消关注
const cancelFollow=async(e)=>{
	uni.$utils.showModal('确认取消关注对方？',1,async()=>{
		not_load.value=false;
		let user_id=e.currentTarget.dataset.user_id;
		let ret=await uni.$get('/appapi-subscribe-cancel',{followed_id:user_id});
		console.log(user_id);
		if(ret.error_code != 0){
			not_load.value=true;
			uni.$utils.showToast(ret.info);
			return;
		}
		loadPage({type:current.value},false);
	});
};
//关注对方
const setFollow=async(e)=>{
	uni.$utils.showModal('确认关注对方？',1,async()=>{
		not_load.value=false;
		let user_id=e.currentTarget.dataset.user_id;
		let ret=await uni.$get('/appapi-subscribe-setsub',{followed_id:user_id});
		console.log(user_id);
		if(ret.error_code != 0){
			not_load.value=true;
			uni.$utils.showToast(ret.info);
			return;
		}
		loadPage({type:current.value},false);
	});
   
};
//切换
const tabsChange=(e)=>{
	next_page.value='';
	current.value=e;
	if(e == 2){
		getBlacklist();
		return;
	}
	loadPage({type:e},false);
};
//拉取我的黑名单列表
const blackList=ref([]);
const getBlacklist=async()=>{
	not_load.value=false;
	let ret=await uni.TIM.getBlacklist();
	if(ret.data){
		let data=await uni.$post('/appapi-member-getblacklist',{},{ids:ret.data});
		let list=data.data.list;
		blackList.value=list;
		
	}else{
		blackList.value=[];
	}
	not_load.value=true;
};
//解除黑名单
const liftblack=async(e)=>{
	uni.$utils.showModal('确认解除黑名单操作？',1,async()=>{
		let user_id=e.currentTarget.dataset.user_id;
		user_id=user_id.toString();
		let ret=await uni.TIM.removeFromBlacklist([user_id]);
		if(!ret.data){
			uni.$utils.showToast('解除黑名单失败');
			return;
		}
		getBlacklist();
	});
};
//页面加载时
onLoad(async (options)=>{
	options.type=0; // 拉取我的关注
    loadPage(options,false);
});

//页面显示时执行
onShow(()=>{
	//console.log('语法糖onShow');
});
//页面隐藏时执行
onHide(()=>{
	//console.log('语法糖onHide');
});

/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	not_load.value=false;
	let ret = await uni.$get('/appapi-subscribe-getuserlist',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
    page_load.value=false;
	show_main.value=true;
	not_load.value=true;
	next_page.value=ret.data.next_page;
	if(isPage) list.value=[...list.value,...ret.data.list];
	else list.value=ret.data.list;
	//console.log(ret.data);
};
onPullDownRefresh(()=>{
	//console.log('onPullDownRefresh');
	//not_load.value=false;
	setTimeout(()=>{
		loadPage({},false);
		uni.stopPullDownRefresh();
	}, 1000);
});
//上拉触底加载分页
onReachBottom(()=>{
	if (!next_page.value) return;
	if (page_load.value) return;
	page_load.value=true;
	setTimeout(()=>{
	  loadPage(next_page.value, true); 
	},2000);
});
/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	uni.$utils.dataSetPage(event);
};
// 跳转聊天
const chat=(e)=>{
	let userId=e.currentTarget.dataset.user_id;
	let nick=e.currentTarget.dataset.nick;
	let conversationID=getConversationID(userId);
	if(conversationID){
		let uri='/pages/chat-single/chat-single?conversationID='+conversationID+'&nick='+nick+'&to='+userId;
		uni.$utils.goPage(uri,0);
		return;
	}
	not_load.value=false;
	let str=uni.$appConfig['IM_PREFIX_MAKR']['da_zhao_hu']['rule']+'你好！';
	uni.TIM.createTextMessage(0,userId,str,(data)=>{
		setTimeout(()=>{
			not_load.value=true;
			conversationID=getConversationID(userId);
			let uri='/pages/chat-single/chat-single?conversationID='+conversationID+'&nick='+nick+'&to='+userId;
			uni.$utils.goPage(uri,0);
		},500);
	});
}
// 判断是有会话列表
//获取当前用户的会话ID
const getConversationID=(userId)=>{
	let list=uni.$vuex.state.globalData.conversationList;
	for(let i in list){
		if(list[i].type != 'C2C') continue;
		if(list[i].userProfile.userID == userId){
			return list[i].conversationID;
		}
	}
	return '';
};
</script>

<style  lang="scss">
	page {
		
	}
.fnow{color:#2979ff;}
</style>
